<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/jszl_dataClass.css">
    <link rel="stylesheet" href="../font/iconfont/font_wfwf1mhqz7/iconfont.css">
    <link rel="stylesheet" href="../font/iconfont/font_wfwf1mhqz7/iconfont.ttf">
    <link rel="stylesheet" href="../libs/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="../js/jquery-3.1.1.js"></script>
    <script src="../libs/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="../js/allData.js"></script>
    <script src="../js/utils.js"></script>
    <title>技术资料-资料类型</title>
</head>

<body>
    <div id="mainDiv">
        <div class="clear">
            <div><span>装备分类</span></div>
            <div><button data-toggle="modal" data-target="#myModal">添加分类</button></div>
        </div>
        <table>
            <thead>
                <tr>
                    <th>类别名称</th>
                    <th></th>
                    <th>资料数</th>
                    <th></th>
                    <th>更新时间</th>
                    <th></th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <!-- 模态框-添加分类 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        data-dismiss="modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增分类</h4>
                </div>
                <div class="modal-body">
                    <span>分类名称</span><input id="addTypesVal" type="text">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addData()">确认</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框-编辑分类 -->
    <div class="modal fade" id="myModal_bianJiClass" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">编辑分类</h4>
                </div>
                <div class="modal-body">
                    <span>分类名称</span><input type="text"></input>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
                    <!-- 
                        1.点击确认后，获取模态框input里边的值
                        2.让该值去和dataTypes(JSON数据)中找相同的值
                        3.如果相同，dataTypes中的dataNum的值加一
                        4.如果不同，则在dataTypes中第一条的位置添加该数据(需要：1.获取当前时间。2.dataNum+1)
                        5.然后重新把dataTypes上传到本地存储、，再重新渲染界面
                     -->
                </div>
            </div>
        </div>
    </div>

    <script>
        // 1.先在login界面中把需要的数据存储至本地存储
        // 2.从本地存储中获取数据
        let jszl_dataTypes = getData('arrTypes')
        // console.log(typeof jszl_dataTypes);
        // 渲染界面
        function showTable() {
            $('#mainDiv table tbody').html('')
            jszl_dataTypes = getData('arrTypes')
            // // 清除上一页的table内容
            // $('#mainDiv table tbody').html('')
            jszl_dataTypes.forEach(item => {
                $('#mainDiv table tbody').append(`
                <tr>
                    <td>${item.className}</td>
                    <td></td>
                    <td>${item.dataNum}</td>
                    <td></td>
                    <td>${item.updateTime}</td>
                    <td></td>
                    <td>
                        <button class="alt iconfont icon-xiugaimima" onclick="altData(this)" data-toggle="modal" data-target="#myModal_bianJiClass"></button>
                        <button class="del iconfont icon-huishouzhan"></button>
                    </td>
                </tr>
                `)
            });
        }

        jszl_dataTypes = getData('arrTypes')
        showTable()


        //  添加分类按钮
        function addData() {
            // 1.点击确认后，获取模态框input里边的值
            // 2.让该值去和jszl_dataTypes(JSON数据)中找相同的值
            // 3.如果相同，jszl_dataTypes中的dataNum的值加一,并把时间改成当前时间
            // 4.如果不同，则在jszl_dataTypes中第一条的位置添加该数据(需要：1.获取当前时间。2.dataNum + 1)
            // 5.然后重新把jszl_dataTypes上传到本地存储、，再重新渲染界面
            let inputVal = $('#addTypesVal').val()//第一点完成
            let bool;
            let i
            for (const key in jszl_dataTypes) {
                // console.log(jszl_dataTypes[key].className);
                // console.log(inputVal);
                // console.log(jszl_dataTypes[key].className);
                // console.log(jszl_dataTypes[key].className == inputVal);
                if (jszl_dataTypes[key].className == inputVal) {// 第二点完成
                    // console.log(jszl_dataTypes.length);
                    jszl_dataTypes.splice(key, 1, {// 第三点完成
                        id: jszl_dataTypes.length,
                        className: inputVal,
                        dataNum: jszl_dataTypes[key].dataNum + 1,
                        updateTime: getTime()
                    })
                    // let json = JSON.stringify(jszl_dataTypes)
                    // console.log(typeof parseInt(json));
                    // console.log(inputVal);
                    break
                }
                jszl_dataTypes[key].className != inputVal ? (bool = false, i = key) : bool = true;// 第四点完成
            }
            if (bool == false && jszl_dataTypes.length == parseInt(i) + 1) {// 第四点完成
                jszl_dataTypes[i].dataNum = 0
                jszl_dataTypes.splice(0, 0, {
                    id: jszl_dataTypes.length + 1,
                    className: inputVal,
                    dataNum: jszl_dataTypes[i].dataNum + 1,
                    updateTime: getTime()
                })
            }
            // console.log(jszl_dataTypes);
            setData('arrTypes', jszl_dataTypes)// 第五点完成
            showTable()
        }

        //  修改类别名称的名字(暂时没写出来)
        function altData(obj) {
            // let inputVal = $('#addTypesVal').val()

            // for (const key in jszl_dataTypes) {
            //     if (obj) {

            //         // console.log(jszl_dataTypes.length);
            //         jszl_dataTypes.splice(key, 1, {
            //             id: parseInt(key) + 1,
            //             className: inputVal,
            //             dataNum: jszl_dataTypes[key].dataNum,
            //             updateTime: getTime()
            //         })
            //         // let json = JSON.stringify(jszl_dataTypes)
            //         // console.log(typeof parseInt(json));
            //         // console.log(inputVal);
            //         break
            //     }
            // }
            // console.log(jszl_dataTypes);
        }


        // 获取当前日期
        function getTime() {
            var myDate = new Date;
            var year = myDate.getFullYear(); //获取当前年
            var mon = myDate.getMonth() + 1; //获取当前月
            var day = myDate.getDate(); //获取当前日
            var time = year + "/" + mon + "/" + day;//当前日期
            return time
        }
        // console.log(getTime());


        // 修改tr的样式
        $('#mainDiv table tbody tr').css(
            "text-align", "center",
        )

        // 删除按钮
        $('#mainDiv table tbody').on('click', '.del', function () {
            // console.log(this.parentNode.parentNode);
            // console.log($(this).parent().parent().index());
            alert('确认删除吗？')
            for (let i = 0; i < jszl_dataTypes.length; i++) {
                if ($(this).parent().parent().index() == i) {
                    // console.log(i);
                    jszl_dataTypes.splice(i, 1)
                    setData('arrTypes', jszl_dataTypes)
                    showTable()
                }
            }
        })

    </script>
</body>

</html>